<template>
  <transition name="slide-down">
    <div class="version-mask privacy" v-if="show">
      <div class="version transition-container">
        <div class="privacy-bg">
          <img :src="privacyImage">
          <h3 class="version-title">Publink隐私声明</h3>
        </div>
        
        <div class="version-description">
          为了更好地保护您的个人信息，我们根据最新的法律法规及相关政策要求，对隐私条款进行了更新。在您使用售后宝前，请阅读《 <a href="#" class="privacy" @click="goPrivacy">Publink隐私声明 </a>》全部条款，我们会按照该“声明"的约定收集、使用、存储您在使用本软件过程中涉及的个人信息，以便为您提供更优质的服务，感谢您的信任与理解。
        </div>
        <div class="version-bottom">
          <el-button type="text" class="btn btn-text" @click="logOut">暂不使用</el-button>
          <el-button type="primary" class="btn btn-text version-btn" @click="agree">同意并继续</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import platform from '@src/platform'
import * as UserCenterApi from 'src/api/UserCenterApi.js';
import { userCenterLogOut } from '@src/util/userCenter';
import { getOssUrl } from '@src/util/assets'
const privacyImage = getOssUrl('/privacy_bg.png')

export default {
  name: 'privacy',
  inject: ['initData'],
  data(){
    return {
      privacyImage,
      show: false,
      versionNum: '',
      description: '',
    }
  },
  computed: {
    tenantType() {
      return this.initData.tenantType;
    },
  },
  mounted(){
    this.$nextTick(()=>{
      this.getUserPrivacyInfo()
    })
  },
  methods: {
    async getUserPrivacyInfo(){
      try {
        const { success } = await UserCenterApi.getUserField()
        if(!success) this.show = true
      } catch (error) {
        console.error(error)
      }
    },
    async agree(){
      this.show = false
      try {
        const { status, message } = await UserCenterApi.addUserField()
        if(status != 0) this.$platform.alert(message)
      } catch (error) {
        console.error(error)
      }
    },
    goPrivacy(){
      let url;
      if(this.tenantType == 2) {
        url = 'https://publink.yuque.com/docs/share/2193d960-75c8-44ab-96a1-aac994c68d8c?#'
      } else if(this.tenantType == 4) {
        url = 'https://publink-hz.feishu.cn/wiki/wikcnpK7FTi8BRj5iq6UPoAUZze'
      } else {
        url = 'https://doc.shb.ltd/shb_dh7hof/ysxy.html'
      } 
      platform.openLink(url);
    },
    logOut(){
      // 调用登出接口 跳转到登录界面
      userCenterLogOut()
    }
  },
}
</script>

<style lang="scss">
.version-mask{
  @include mask();
  z-index: 999;
  overflow: auto;
}
.privacy {
  .version{
    position: absolute;
    top: 40%;
    left: 50%;
    background-color: #fff;
    width: 400px;
    box-shadow: 1px 1px 8px rgba(0,0,0,0.15);
    color: #333;
    border-radius: 8px;
    transform: translate(-50%, -50%);
  }

  .version-banner{
    position: relative;
    padding-top: 1px;
    user-select: none;

    img{
      width: 100%;
      display: block;
      overflow: hidden;
      margin: -35px 0 0 0;
    }
  }

  .privacy-bg {
    position: relative;
    height: 90px;
    img {
      width: 100%;
    }
  }

  .version-title{
    position: absolute;
    top: 30px;
    left: 125px;
    font-size: 20px;
  }

  .version-description{
    padding: 5px 30px 20px 30px;
    max-height: 240px;
    overflow: auto;

    p{
      margin-bottom: 8px !important;

      &:last-child{
        margin-bottom: 0 !important;
      }
    }
  }

  .version-description p{
    line-height: 20px;
  
    &:last-child{
      margin-bottom: 0 !important;
    }
  }

  .version-description .privacy {
    color: $color-primary-light-6;
  }

  .version-bottom{
    text-align: center;
    padding: 10px 15px;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    border-top: 1px solid #f0f0f0;

    button.btn{
      width: 100px;
      height: 32px;
      padding: 0;
      @include fontColor();
      line-height: 32px;
    }
  }

  .version-btn{
    font-size: 14px;
    color: #fff !important;
    border: none;
    outline: none;
    @include backgroundColor();
    border-radius: 4px;
    box-shadow: 0 1px 4px 0px rgba($color-primary,0.5);
    &:hover {
      border-color: $color-primary !important;
      @include backgroundColorImportant();
    }
  }
}

</style>
